<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2_state的简写方式</title>
  </head>

  <body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
      let that = this

      // 1.创建类式组件
      class Weather extends React.Component {
        // 初始化状态
        state = {
          isHot: false,
          wind: "微风"
        }

        render() {
          const { isHot, wind } = this.state
          return <h1 onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}，{wind}</h1>
        }
        
        // 自定义方法————要用赋值语句的形式+箭头函数
        changeWeather = () => {
          console.log(this, "changeWeather")
          const isHot = this.state.isHot
          this.setState({isHot: !isHot})
        }
      }

      // 2.渲染组件到页面
      ReactDOM.render(<Weather/>, document.getElementById("test"))

    </script>
  </body>
</html>